<template>
	<view class="box">
		<view class="box-body">
				<view class="crouseVideo">
					<image :src="course.url" v-if="photoOrVodie==0"></image>
					<video class="crouseVideoo" :src="course.courseUrl" v-else></video>
				</view>
				<view class="course">
					<view class="courseSummary">
						<view class="courseName">{{course.courseName}}</view>
						<view class="courseIntroduce">{{course.courseIntro}}</view>
					<view class="courseMoney">
						<text class="presentPrice">￥{{course.courseNprice}}</text>
						<text>/</text>
						<text class="originalPrice">￥{{course.coursePrice}}</text>
						<text class="courseType">{{course.recommendd}}</text>
					</view>
					<view class="courseReport">
						<text id="salesVolume">销量{{saleNum}}</text>
						<text id="PraiseQuantity">点赞{{likeNum}}</text>
						<text id="CollectionVolume">收藏{{collectNum}}</text>
						<text id="ShareQuantity">分享{{shareNum}}</text>
					</view>
				</view>
				<view class="theCrouseTeacher">
					<view class="teacherImg"><image :src="course.avatarUrl"></image></view>
					<view class="teacherIntroduction">
						<view class="teacherName">{{course.trueName}}</view>
						<view class="teacherInt">{{course.freestyle}}</view>
					</view>
				</view>
				<view class="courseMenuAndcommentArea">
					<u-subsection :list="list" :current="curNow" fontSize="16" activeColor="#1ABC9C" @change="sectionChange" class="subsection"></u-subsection>
				</view>
				<uni-collapse v-if="curNow!=1">
					<uni-collapse-item :title="'课程类型：'+course.name" :open="true" >
						<view class="menuChildren">
							<view class="courseItem" v-for="(items,index) in courses" :key="index">
								<u-icon name="play-circle" size="18" class="courseIcon" :color="items.courseColor"></u-icon>
								<view class="courseItemName" :style="{'color':items.courseColor}">{{items.courseName}}</view>
								<view class="courseItemMoney" :style="{'color':items.courseColor}">￥{{items.courseNprice}}</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<view v-else>
					<view class="comment">
						<view class="commentChildren">
							<view class="message">留言({{comments.length}})</view>
							<view class="writeMessage" @click="show = true">写留言</view>
						</view>
						<view v-for="(comm,index) in comments" :key="index">
							<view class="userComment" v-if="comm.avatarUrl!=null || comm.avatarUrl!=''">
								<view class="commLeft">
									<u-avatar :src="comm.avatarUrl"></u-avatar>
								</view>
								<view class="commRight">
									<view class="commRightTop">
										<view class="trueName">{{comm.nickname}}</view>
										<view class="commentDate">{{comm.commentDate}}</view>
									</view>
									<view class="commRightBot">
										<view class="content">{{comm.content}}</view>
										<view class="fabulous">
											<text>{{comm.fabulous}}</text>
											<u-icon name="thumb-up-fill" size="24" :color="comm.color" @click="commentLike(comm.id,comm.fabulous,index)" class="uicon" ></u-icon>
										</view>
									</view>
								</view>
							</view>	
							<view class="NoComment" v-else>
								还没有人评论呢~
							</view>	
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box-foot">
			<u-tabbar>
				<u-popup :show="show" mode="center" type="dialog" >
					<view class="UserComment">
						<view class="liuyan">留言</view>
						<view class="commText">
							<u-textarea placeholder="请输入您的留言" :height="120" v-model="content"></u-textarea>
						</view>
						<view class="commBtn">
							<u-button @click="yes">确定</u-button>
							<u-button @click="close">取消</u-button>
						</view>
					</view>
				</u-popup>
				<view class="dianzan">
					<text><u-icon name="thumb-up" size="28" class="zan" :color="zann" @click="zan"></u-icon></text>
					<text><u-icon name="star" size="28" class="cang" :color="cangg" @click="cang"></u-icon></text>
					<text><u-icon name="share-fill" size="28" class="fen"></u-icon></text>
				</view>
				<view class="shopping">
					<u-button type="primary" class="addToCart" @click="addToCart">加入购物车</u-button>
					<u-button type="primary" class="BuyNow" @click="confirmOrder">立即购买</u-button>   
				</view>
			</u-tabbar>
		</view>
	</view>	
</template>

<script>
	import {selectJsCourseById} from "@/static/http/getData.js"
	
	import {selectJsCourseTypeById} from "@/static/http/getData.js"
	
	import {selectJsCourseComment} from "@/static/http/getData.js"
	
	import {updateCollectNum} from "@/static/http/getData.js"
	
	import {selectJsCourseSalesVolume} from "@/static/http/getData.js"
	
	import {selectJsCourseLikeNum} from "@/static/http/getData.js"
	
	import {selectJsCourseCollectNum} from "@/static/http/getData.js"
	
	import {selectJsCourseShareNum} from "@/static/http/getData.js"
	
	import {insertCourseLikeNum} from "@/static/http/getData.js"
	
	import {delCourseLikeNum} from "@/static/http/getData.js"
	
	import {insertCourseCollectNum} from "@/static/http/getData.js"
	
	import {delCourseCollectNum} from "@/static/http/getData.js"
	
	import {insertCourseComment} from "@/static/http/getData.js"
	
	import {insertCourseCommentLikeNum} from "@/static/http/getData.js"
	
	import {deleteCourseCommentLikeNum} from "@/static/http/getData.js"
	
	import {selectCourseCommentLikeNum} from "@/static/http/getData.js"
	 
	import {addShopOrder} from "@/static/http/getData.js" 
	
	export default{
		data(){
			return{
				photoOrVodie:0,
				course:[],
				courses:[],
				comments:[],
				list:['课程目录','评论区'],
				curNow:0,
				zann:"#606266",
				cangg:"#606266",
				zanBoo:0,
				cangBoo:0,
				courseId:"",
				courseName:"",
				commentColor:"#606266",
				fabulousBoo:0,
				show:false,
				saleNum:'',//销量
				likeNum:'', //点赞数量
				shareNum:'',//分享数量
				collectNum:'',//收藏数量
				content:""
			}
		},
		//提前加载一次
		onLoad(option){
			this.courseId=option.courseId;
			this.selectCourseById(option.courseId);
			this.selectJsCourseType(option.id,2);
			this.selectJsCourseComment(option.courseId,2,1,2,2,89);
		},
		methods:{
			confirm(value){
				console.log(value);
				this.$refs.popup.close();
			},
			//添加评论（确定）
			yes(){
				var commentDate = new Date();
				commentDate = this.getTime(commentDate);
				var data1={
					userId:89,
					type:2,
					commodityId:this.courseId,
					content:this.content,
					commentDate:commentDate,
					display:2,
					fabulous:0,
					reply:0,
					status:1,
					createDate:commentDate,
					userType:2
				};
				
				if(this.content.length!=0){
					insertCourseComment(data1).then(res=>{
						this.show=false;
						this.selectJsCourseComment(this.courseId,2,1,2,2,89);
					});
					uni.showToast({
						icon:"success",
						title:"评论成功",
						duration:2000
					});
					
				}else{
					uni.showToast({
						icon:"error",
						title:"不能发表空的言论哦~",
						duration:2000
					})
				}
			},
			//添加评论（取消）
			close(){
				this.show=false;
			},
			//头部导航栏（返回首页）
			toIndex(){
				uni.navigateTo({
						url:"/pages/index/index-index"
				})
			},
			//提前对底部导航栏中的点赞，收藏，分享做出判断（选中）
			judgeSelected(courseId,type,userId){
				this.selectJsCourseLikeNum(courseId,type,userId);
				this.selectJsCourseCollectNum(courseId,type,userId);
				this.selectJsCourseShareNum(courseId,2);
				this.selectJsCourseSalesVolume(3,courseId,userId);
			},
			//通过课程Id查看课程详情
			selectCourseById(courseId){
				var data1 = {
					courseId:courseId
				}
				selectJsCourseById(data1).then(res=>{
					this.course=res.data.data;
					this.courseName = res.data.data.courseName;
					this.judgeSelected(courseId,2,'');
					this.judgeSelected(courseId,2,89);
				})
			},
			//监听分段器（课程目录 - 评论区）
			sectionChange(index){
				this.curNow=index;
			},
			//查看总分类下的所有课程
			selectJsCourseType(id,courseStatus){
				var data1={
					id:id,
					courseStatus:courseStatus
				};
				selectJsCourseTypeById(data1).then(res=>{
					this.courses=res.data.data;
					var courseName = this.courseName;
					var courseTypes = res.data.data;
					for (var i = 0; i < courseTypes.length; i++) {
						if(courseTypes[i].courseName==courseName){
							courseTypes[i].courseColor="#1ABCA8";
						}
					}
				})
			},
			//点赞
			zan(){
				var courseId = this.courseId;
				if(this.zanBoo==0){
					this.zanBoo=1;
					this.zann="#1ABC9C";
					this.insertLikeNum(courseId,89,2);
				}else{
					this.zanBoo=0;
					this.zann="#606266";
					this.delLikeNum(courseId,89,2);
				}
			},
			//收藏
			cang(){
				var courseId = this.courseId;
				if(this.cangBoo==0){
					this.cangBoo=1;
					this.cangg="#FFE698";
					this.insertCourseCollectNum(courseId,89);
				}else{
					this.cangBoo=0;
					this.cangg="#606266";
					this.delCourseCollectNum(courseId,89);
				}
			},
			//增加课程点击量
			insertLikeNum(courseId,userId,type){
				var likeTime = new Date();
				likeTime = this.getTime(likeTime);
				var data1 = {
					bePraisedId:courseId,
					userId:userId,
					likeTime:likeTime,
					type:type
				};
				insertCourseLikeNum(data1).then(res=>{
					this.selectCourseById(courseId);
				})
			},
			//删除课程点击量
			delLikeNum(courseId,userId,type){
				var data1={
					bePraisedId:courseId,
					userId:89,
					type:type
				};
				delCourseLikeNum(data1).then(res=>{
					this.selectCourseById(courseId);
				})
			},
			//添加课程收藏量
			insertCourseCollectNum(courseId,userId){
				var collectionDate = new Date();
				collectionDate = this.getTime(collectionDate);
				var data1={
					productId:courseId,
					userId:userId,
					collectionType:2,
					collectionDate:collectionDate
				};
				
				insertCourseCollectNum(data1).then(res=>{
					this.selectCourseById(courseId);
				})
			},
			//删除课程收藏量
			delCourseCollectNum(courseId,userId){
				var data1={
					userId:userId,
					collectionType:2,
					productId:courseId
				};
				delCourseCollectNum(data1).then(res=>{
					this.selectCourseById(courseId);
				})
			},
			//查看课程销量
			selectJsCourseSalesVolume(orderStatus,productId,userId){
				var data1={
					orderStatus:orderStatus,
					productId:productId,
					userId:userId
				};
				if(userId==''){
					selectJsCourseSalesVolume(data1).then(res=>{
						this.saleNum=res.data.data;
					});
				}else{
					selectJsCourseSalesVolume(data1).then(res=>{
						this.photoOrVodie = res.data.data;
					})
				}
			},
			//查看用户课程点赞量
			selectJsCourseLikeNum(courseId,type,userId){
				var data1={
					courseId:courseId,
					type:type,
					userId:userId
				}
				if(userId==''){
					selectJsCourseLikeNum(data1).then(res=>{
						this.likeNum=res.data.data;
					})
				}else{
					selectJsCourseLikeNum(data1).then(res=>{
						if(res.data.data>0){
							this.zann="#1ABC9C";
							this.zanBoo=1;
						}else{
							this.zann="#606266";
						}
					})
				}
			},
			//查看用户课程收藏量
			selectJsCourseCollectNum(courseId,type,userId){
				var data1={
					courseId:courseId,
					type:type,
					userId:userId
				}
				if(userId==''){
					selectJsCourseCollectNum(data1).then(res=>{
						this.collectNum=res.data.data;
					})
				}else{
					selectJsCourseCollectNum(data1).then(res=>{
						if(res.data.data>0){
							this.cangg="#FFE698";
							this.cangBoo=1;
						}else{
							this.cangg="#606266";
						}
					})
				}
			},
			//查看用户课程分享量
			selectJsCourseShareNum(courseId,type,userId){
				var data1={
					courseId:courseId,
					type:type,
					userId:userId
				}
				selectJsCourseShareNum(data1).then(res=>{
					this.shareNum=res.data.data;
				})
			},
			//查看此课程评论
			selectJsCourseComment(courseId,display,status,type,userType,userId){
				var data1={
					courseId:courseId,
					display:display,
					status:status,
					type:type,
					userType:userType,
					userId:userId
				};
				
				selectJsCourseComment(data1).then(res=>{
					this.comments=res.data.data;
					var comm = this.comments;
					for (var i = 0; i < comm.length; i++) {
						if(comm[i].likeNum>0){
							comm[i].color="#FFE698";
							comm[i].fabulousBoo=1;
						}else{
							comm[i].color="#606266";
							comm[i].fabulousBoo=0;
						}
					}
				})
			},
			//为评论点赞
			commentLike(id,fabulous,index){
				var courseId = this.courseId;
				if(this.comments[index].fabulousBoo==0){
					this.comments[index].fabulousBoo=1;
					this.comments[index].color="#FFE698";
					this.insertCourseCommentLikeNum(89,courseId,id);
				}else{
					this.comments[index].fabulousBoo=0;
					this.comments[index].color="#606266";
					this.deleteCourseCommentLikeNum(89,courseId,id);
				}
			},
			//为课程评论进行点赞
			insertCourseCommentLikeNum(userId,productId,id){
				var createDate = new Date();
				createDate = this.getTime(createDate);
				var data1={
					userId:userId,
					createDate:createDate,
					userType:2,
					productType:2,
					productId:productId,
					commentId:id
				};
				insertCourseCommentLikeNum(data1).then(res=>{
					this.selectJsCourseComment(productId,2,1,2,2,89);
				})
			},
			//对课程评论进行删除
			deleteCourseCommentLikeNum(userId,productId,id){
				var data1={
					userId:userId,
					userType:2,
					productType:2,
					commentId:id,
					productId:productId,
				};
				deleteCourseCommentLikeNum(data1).then(res=>{
					this.selectJsCourseComment(productId,2,1,2,2,89);
				})
			},
			//添加到购物车
			addToCart(){
				var createTime = new Date();
				createTime = this.getTime(createTime);
				var data1 = {
					productId:this.courseId,
					userId:89,
					productNum:1,
					productType:2,
					createTime:createTime
				};
				
				addShopOrder(data1).then(res=>{
					if(res.data.data){
						uni.showToast({
							icon:"success",
							title:"成功加入购物车",
							duration:2000
						});
					}else{
						uni.showToast({
							icon:"error",
							title:"服务器出小差了",
							duration:2000
						});
					}
				})
			},
			//确认订单
			confirmOrder(){

				if(!this.photoOrVodie==0){
					uni.showToast({
						icon:"none",
						title:"此课程您已经购买过喽",
						duration:2000
					});
				}else{
					uni.navigateTo({
						url:"/pages/shopping/confirmOrder?courseId="+this.courseId
					})
				}
			},
			//顶部时间
			getTime(date){
			    var year = date.getFullYear(); //获取完整的年份(4位,1970-????)
			    var month = date.getMonth()+1; //获取当前月份(0-11,0代表1月)
			    var today = date.getDate(); //获取当前日(1-31)
			    var hour = date.getHours(); //获取当前小时数(0-23)
		        var minute = date.getMinutes(); //获取当前分钟数(0-59)
		        var second = date.getSeconds(); //获取当前秒数(0-59)
		        var nowTime;
		        nowTime = year+'-'+this.fillZero(month)+'-'+this.fillZero(today)+' '+this.fillZero(hour)+':'+this.fillZero(minute)+':'+this.fillZero(second);
		        return nowTime;
		    },
		    //时间的为零操作
		    fillZero(str){
		        var realNum;
 	            if(str<10){
					realNum	= '0'+str;
			    }else{
					realNum	= str;
			    }
			        return realNum;
			}
		}
	}
</script>

<style>
	*{
		margin:0;
		padding:0;
	}
	.box{
		margin:0 auto;
		width:100%;
		height:100%;
	}
	.subsection{
		height:46px;
	}
	
	.box .box-body{
		margin:0 auto;
		width:100%;
		height:100%;
	}

	.box .box-body .course text{
		margin:0 auto;
		width:100%;
		height:100%;
		padding-left:10px;
	}
	.box .box-body video{
		width:100%;
	}
	.box .box-body image{
		width:100%;
		height:180px;
	}
	.box .box-body .course{
		margin:0 auto;
		width:96%;
	}
	.box .box-body .course .courseSummary{
		width:100%;
		padding-top:10px;
	}
	.box .box-body .course .courseSummary .courseName{
		width:100%;
		font-size:20px;
	}
	.box .box-body .course .courseSummary .courseIntroduce{
		width:100%;
		padding-top:10px;
		color:#808080;
		font-size:14px;
	}
	.box .box-body .course .courseMoney{
		width:100%;
		padding-top:10px;
	}
	.box .box-body .course .courseMoney .presentPrice{
		font-size:20px;
		color:#DD001B;
	}
	.box .box-body .course .courseMoney .originalPrice{
		font-size:12px;
		color:#808080;
		text-decoration:line-through;
	}
	.box .box-body .course .courseMoney .courseType{
		width:20px;
		height:10px;
		font-size:12px;
		text-align: center;
		border-radius:20%;
		margin-left:10px;
		color:#1ABC9C;
		padding-right:10px;
		border:2px solid #1ABC9C;
	}
	.box .box-body .course .courseReport{
		width:100%;
		font-weight:bold;
		padding-top:10px;
		padding-bottom:10px;
	}
	.box .box-body .course .courseReport text{
		font-size:13px;
	}
	.box .box-body .theCrouseTeacher{
		width:100%;
		height:60px;
		padding-top:10px;
		border:2px solid #EEEEEE;
		background-color:#FFFFFF;
	}
	.box .box-body .teacherImg{
		width:50px;
		height:50px;
		float:left;
		margin-left:10px;
		overflow: hidden;
		border-radius:50%;
	}
	.box .box-body .teacherImg image{
		width:100%;
		height:100%;
	}
	.box .box-body .teacherIntroduction{
		width:80%;
		height:60px;
		line-height:20px;
		float: right;
	}
	.box .box-body .teacherIntroduction .teacherName{
		font-size:15px;
	}
	.box .box-body .teacherIntroduction .teacherInt{
		font-size:12px;
		color:#808080;
	}
	.box .box-body .courseMenuAndcommentArea{
		width:100%;
		height:50px;
		text-align:center;
		background-color:#EEEEEE;
	}
	.box .box-body .courseMenu{
		width:48%;
		height:44px;
		float: left;
		color:#1ABC9C;
		line-height:44px;
		margin:2px 0px 0px 3px;
		background-color: #FFFFFF;
	}
	.box .box-body .commentArea{
		width:48%;
		height:44px;
		float: right;
		line-height:44px;
		margin:2px 3px 0px 0px;
		background-color: #EEEEEE;
	}
	.box .box-body .menu{
		width:100%;
		height:50px;
		line-height:50px;
		padding-left:10px;
		background-color:#FFFFFF;
		border-bottom:2px solid #EEEEEE;
	}
	.box .box-body .menuCourse{
		width:80%;
		height:50px;
		font-weight:bold;
		float:left;
	}
	.box .box-body .menuShow{
		width:20%;
		height:50px;
		float: right;
		padding-top:6px;
	}
	.box .box-body .menuShow image{
		width:20px;
		height: 20px;
		transform:rotate(-90deg);
	}
	.box .box-body .menuChildren{
		width:100%;
		color:#808080;
	}
	.box .box-body .menuChildren .courseItem{
		width:100%;
		height:40px;
		line-height:40px;
		padding-left:10px;
		background-color:#FFFFFF;
		border-bottom:2px solid #EEEEEE;
	}
	.box .box-body .menuChildren .courseItem .courseIcon{
		width:5%;
		margin:13px 0px 0px 4px;
		float: left;
	}
	.box .box-body .menuChildren .courseItem .courseItemName{
		width:60%;
		float: left;
		margin-left:20px;
	}
	.box .box-body .menuChildren .courseItem .courseItemMoney{
		width:20%;
		float: right;
	}
	.comment{
		width:100%;
		height:100%;
		float: left;
		background-color: #007AFF;
		margin-bottom:50px;
	}
	.comment .commentChildren{
		width:100%;
		height:40px;
		line-height:40px;
		background-color: #FFFFFF;
	}
	.comment .commentChildren .message{
		float: left;
		font-size:18px;
		padding-left:10px;
	}
	.comment .commentChildren .writeMessage{
		float: right;
		font-size:14px;
		color:#1ABC9C;
		padding-right:10px;
	}
	.userComment{
		width:100%;
		height:100%;
		float: left;
		line-height:30px;
		background-color:#FFFFFF;
		border-top: 2px solid #EEEEEF;
	}
	.userComment .commLeft{
		float: left;
		width:15%;
		padding:10px 0px 0px 15px;
	}
	.userComment .commRight{
		float: right;
		width:80%;
	}
	.userComment .commRight .commRightTop{
		width:100%;
		height:30px;
		line-height:30px;
	}
	.userComment .commRight .commRightBot{
		width:100%;
		height:30px;
		line-height:30px;
	}
	.userComment .commRight .commRightTop .trueName{
		float: left;
	}
	.userComment .commRight .commRightTop .commentDate{
		float: right;
		color:#808080;
		font-size:12px;
		padding-right:20px;
	}
	.userComment .commRight .commRightBot .content{
		float: left;
		color:#808080;
	}
	.userComment .commRight .commRightBot .fabulous{
		float: right;
		padding-right:20px;
	}
	.fabulous .uicon{
		margin:-28px 0px 0px 20px;
	}
	.NoComment{
		width:100%;
		height:40px;
		line-height:40px;
		font-size:14px;
		color:#8F939C;
		padding-left:2px;
	}
	.UserComment{
		width:300px;
	}
	.liuyan{
		padding-top:10px;
		width:100%;
		font-size:20px;
		text-align:center;
	}
	.commText{
		margin:10px;
		width:94%;
		font-size:16px;
	}
	.commBtn{
		width:100%;
	}
	.commBtn button{
		float: left;
		width:50%;
	}
	
	.dianzan{
		width:40%;
		height:60px;
		line-height:60px;
	}
	.dianzan .zan,.cang,.fen{
		float:left;
		padding-left:20px;
		padding-top:12px;
	}
	
	.shopping{
		width:60%;
		line-height:40px;
		border-radius: 20%;
		padding:6px 0px 0px 10px;
	}
	.shopping .addToCart{
		width:110px;
		height:40px;
		float: left;
		color:#FFFFFF;
		font-size:16px;
		border:none;
		background-color:#FF8734;
		border-bottom-left-radius: 25px;
		border-bottom-right-radius: 0px;
		border-top-left-radius: 25px;
		border-top-right-radius: 0px;
	}
	.shopping .BuyNow{
		width:100px;
		height:40px;
		line-height:36x;
		color:#FFFFFF;
		float: left;
		font-size:16px;
		border:none;
		background-color:#FF462F;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 25px;
		border-top-left-radius: 0px;
		border-top-right-radius: 25px;
	}
</style>
